<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="{{url_for('static',filename='js/echarts.min.js')}}"></script>
    <script type="text/javascript" src="{{url_for('static',filename='js/jquery.min.js')}}"></script>
    <!--<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>-->
	<script src="{{url_for('static',filename='js/raydreams.js')}}"></script>
    <script src="{{url_for('static',filename='js/bootstrap.min.js')}}"></script>
    <script src="{{url_for('static',filename='js/jquery.dataTables.min.js')}}"></script>
    <link rel="stylesheet" href="{{url_for('static',filename='css/jquery.dataTables.min.css')}}">
    <link rel="stylesheet" href="{{url_for('static',filename='css/bootstrap.min.css')}}">
    <title>Title</title>
</head>
<body>
        <nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">盯盘宝后台管理系统</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li ><a href="{{ url_for('start_web') }}">首页</a></li>
            <li ><a href="{{ url_for('permission_manage') }}">权限配置</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    管理员{{ session['admin'] if session['admin'] else "未登录" }}
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="{{ url_for("login_out") }}">退出</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>
<!--最上面放buton    -->
<div align="center">

    <div class="btn-group btn-group-lg" role="group" aria-label="...">


        <div class="btn-group" role="group">
        <button type="button" class="btn btn-primary" onclick="chubanMonitor()">触板股票监控</button>
        </div>

        <div class="btn-group" role="group">
        <button type="button" class="btn btn-primary" onclick="supportLine()">支撑线</button>
        </div>

    </div>
    <br/>
    <br/>
</div>
<!--最上面放buton    -->
<table colume="center" class="table table-striped table-bordered"  style="width:100%">
 <tr>
    <td>
    <div id="zhangDieNum" style="width: 300px;height:300px;"></div>
    </td>
    <td>
    <div id="zhangDieTingNum" style="width: 300px;height:300px;"></div>
    </td>
     <td>
    <div id="zhangDieTingDropNewNum" style="width: 300px;height:300px;"></div>
    </td>
    <td>
        <div id="lianBan" style="width:300px;height:300px;"></div>
    </td>

 </tr>
    <tr>
    <td>
         <div id="zhaBan" style="width:300px;height:300px;"></div>
     </td>
      <td>
         <div id="zhangTingBuyOne" style="width:300px;height:300px;"></div>
     </td>
     <td>
         <div id="zhangTingDeal" style="width:300px;height:300px;"></div>
     </td>
    <td>
        <div id="erLianBan" style="width:300px;height:300px;"></div>
    </td>
</tr>
<tr>
<td>
    <div>
    <button type="button" class="btn btn-primary" onclick="refreshMarketHeight()">强制刷新</button>
    <div id="marketHeight" style="width:300px;height:300px;">
    </div>
    </div>
</td>
<td>
    <div id="marketHeightStock" style="height:300px;overflow: scroll;"></div>
</td>
<td>
    <div id="marketHeightHistory" style="height:300px;overflow: scroll;">
        <table id="marketHeightDataTable" cellspacing="0" style="border: 1px solid rgb(68,113,188)" border="1" >
            <thead>
            <tr>
                <th>日期</th>
                <th>一进二</th>
                <th>二进三</th>
                <th>三进四</th>
                <th>四进五</th>
                <th>五进六</th>
                <th>六进七</th>
            </tr>
            <thead>
        </table>
    </div>
</td>
</tr>
</table>

<script type="text/javascript" >
function chubanMonitor() {
    window.open('./monitor/chubanMonitor')
}
function supportLine() {
    window.open('./monitor/supportLine')
}
function refreshMarketHeight() {
    $.ajax({
        url:"/refreshMarketHeight",
        async:true,
        success:function (result) {
            if ($.type(result)=="string"){
                result = JSON.parse(result);
            }
            alert(result.message);
        }
    })
}
// 基于准备好的dom，初始化echarts实例
var zhangDieNumChart = echarts.init(document.getElementById('zhangDieNum'));
var zhangDieTingNumChart=echarts.init(document.getElementById('zhangDieTingNum'));
var zhangDieTingDropNewNumChart=echarts.init(document.getElementById('zhangDieTingDropNewNum'));
var lianBanChart=echarts.init(document.getElementById('lianBan'));
var zhaBanChart=echarts.init(document.getElementById('zhaBan'));
var zhangTingBuyOneChart=echarts.init(document.getElementById('zhangTingBuyOne'));
var zhangTingDealChart=echarts.init(document.getElementById('zhangTingDeal'));
var erLianBanChart = echarts.init(document.getElementById('erLianBan'));
var marketHeightChart=echarts.init(document.getElementById('marketHeight'));
var market_height_history_list = null;

addData();
setInterval(function (){
    addData();
}, 60000);

function addData(){
        $.ajax({
            url: "/ajax", async: true, success: function (data) {
                    var obj = JSON.parse(data);
                    var timeData=obj.timeData;
                    var zhangData=obj.zhangData;
                    var dieData=obj.dieData;
                    var zhangTingData=obj.zhangTingData;
                    var zhangTingDropNewData=obj.zhangTingDropNewData;
                    var dieTingData=obj.dieTingData;
                    var dieTingDropNewData=obj.dieTingDropNewData;
                    var yesZhangfuData=obj.yesZhangfuData;
                    var zhaBanData=obj.zhaBanData;
                    var zhangTingBuyOneData=obj.zhangTingBuyOneData;
                    var zhangTingDealData=obj.zhangTingDealData;
                    var zhangFuDictData=obj.zhangFuDictData;
                    refreshEchart(timeData,zhangData,dieData,zhangTingData,
                        zhangTingDropNewData,dieTingData,dieTingDropNewData,
                        yesZhangfuData,zhaBanData,zhangTingBuyOneData,
                        zhangTingDealData,zhangFuDictData);
            }
        });
        $.ajax({
            url: "/marketHeight", async: true, success: function (data) {
                    var obj = JSON.parse(data);
                    var countList=obj.count_list;
                    if (market_height_history_list == null){
                        market_height_history_list = obj.market_height_history_list;
                        $('#marketHeightDataTable').DataTable( {
                        "paging":false,
                        "ordering": false,
                        "info": false,
                        "data": market_height_history_list,
                        "columns": [
                            {"data":"date"},
                            { "data": "1_to_2" },
                            { "data": "2_to_3" },
                            { "data": "3_to_4" },
                            { "data": "4_to_5" },
                            { "data": "5_to_6" },
                            { "data": "6_to_7" }
                        ]});
                    }
                    if (countList.length==0){
                        return;
                    }
                    var totalList=obj.total_list;
                    var ztList=obj.zt_list;
                    var lianbanStockDick = obj.lianban_stock_dict;
                    var htmlStr = "";
                    for (var key in lianbanStockDick) {
                            var stockNameList = lianbanStockDick[key];
                            {#htmlStr += "<div css='display:inline-block'>";#}
                            htmlStr += "<p style='float:left;border:2px solid;'>";
                            htmlStr += key + ":<br/>";
                            for (var i = 0; i < stockNameList.length; i++) {
                                htmlStr += stockNameList[i] + "<br/>";
                            }
                            htmlStr += "</p>";
                            {#htmlStr += "</div>";#}
                        }
                    $("#marketHeightStock").html(htmlStr);
                    refreshMarketHeightEchart(countList,totalList,ztList);

            }
        });
    }
function refreshMarketHeightEchart(countList,totalList,ztList){
        var xList=new Array();
        for (var count of countList){
            var str=String(count+1)+'连板';
            xList.push(str);
        }
        marketHeightChart.setOption({
        title: {
                text: '市场高度监控(新股/复牌除外)'
            },
        // tooltip: {trigger: 'axis'},
        // legend:{data:legend_list,y:'bottom'},
        label:{
            show:true,
            position:'top',
            formatter:function(a){
                if (a.name=='1连板'){
                return ztList[a.dataIndex];
                }else{
                var numerator=ztList[a.dataIndex];
                var denominator=totalList[a.dataIndex];
                var labelStr=String(numerator)+'/'+String(denominator);
                return labelStr;}
            }
            },
        xAxis: {
            data: xList,
            axisLabel:{
                interval:0
            }
        },
        yAxis: {},
        series:[{
            data:ztList,
            type:'bar'
        }]
    });
}
function refreshEchart(timeData,zhangData,dieData,zhangTingData,
                        zhangTingDropNewData,dieTingData,dieTingDropNewData,
                        yesZhangfuData,zhaBanData,zhangTingBuyOneData,
                        zhangTingDealData,zhangFuDictData){
zhangDieNumChart.setOption({
        title: {
            text: '涨跌数对比'+zhangData[zhangData.length-1]+':'+dieData[dieData.length-1]
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
        data: timeData,
        show:false
        },
        yAxis:{},
        dataZoom:[{show:true}],//比例
        series: [{
        name:'涨数',
        type:'line',
        data: zhangData
        }, {
        name:'跌数',
        type:'line',
        data:dieData}]
        });
zhangDieTingNumChart.setOption({
    title: {
            text: '涨跌停数对比'+zhangTingData[zhangTingData.length-1]+':'+dieTingData[dieTingData.length-1]
        },
    tooltip: {trigger: 'axis'},
    // legend: {
    //     data:['涨停数','跌停数'],
    //     y:'bottom'
    //     },
    xAxis: {
        data: timeData,
        show:false
    },
    yAxis: {},
    dataZoom:[{show:true}],
    series: [{
        name:'涨停数',
        type:'line',
        data: zhangTingData
    }, {
        name:'跌停数',
        type:'line',
        data:dieTingData}]
});
zhangDieTingDropNewNumChart.setOption({
    title: {
            text: '涨跌停数(去除新股)对比'+zhangTingDropNewData[zhangTingDropNewData.length-1]+':'+dieTingDropNewData[dieTingDropNewData.length-1]
        },
    tooltip: {trigger: 'axis'},
    // legend: {
    //     data:['涨停数','跌停数'],
    //     y:'bottom'
    //     },
    xAxis: {
        data: timeData,
        show:false
    },
    yAxis: {},
    dataZoom:[{show:true}],
    series: [{
        name:'涨停数(去新)',
        type:'line',
        data: zhangTingDropNewData
    }, {
        name:'跌停数(去新)',
        type:'line',
        data:dieTingDropNewData}]
});
lianBanChart.setOption({
    title: {
            text: '昨日涨停股今日表现'+yesZhangfuData[yesZhangfuData.length-1]+'%'
        },

    tooltip: {trigger: 'axis'},
    // legend: {
    //         data:['涨幅'],
    //         y:'bottom'
    //     },
    xAxis: {
        data: timeData,
        show:false
    },
    yAxis: {},
    dataZoom:[{show:true}],
    series: [{
        name: '涨幅',
        type: 'line',
        data: yesZhangfuData
    }]
});
zhaBanChart.setOption({
    title: {
            text: '炸板率'+zhaBanData[zhaBanData.length-1]+'%'
        },
    tooltip: {trigger: 'axis'},
    // legend: {
    //         data:['炸板率'],
    //         y:'bottom'
    //     },
    xAxis: {
        data: timeData,
        show:false
    },
    yAxis: {},
    dataZoom:[{show:true}],
    series: [{
        name:'炸板率',
        type: 'line',
        data: zhaBanData
    }]
});
zhangTingBuyOneChart.setOption({
    title: {
            text: '涨停板上封单数总和'+zhangTingBuyOneData[zhangTingBuyOneData.length-1]+'亿元',
            textStyle:{
                fontSize:15
            }
        },
    tooltip: {trigger: 'axis'},
    // legend: {
    //         data:['封单'],
    //         y:'bottom'
    //     },
    xAxis: {
        data: timeData,
        show:false
    },
    yAxis: {},
    dataZoom:[{show:true}],
    series: [{
        name:'封单',
        type: 'line',
        data: zhangTingBuyOneData
    }]
});
zhangTingDealChart.setOption({
    title: {
            text: '涨停板上实时成交量总和'+zhangTingDealData[zhangTingDealData.length-1]+'万元',
            textStyle:{

                fontSize:15
            }
        },
    tooltip: {trigger: 'axis'},
    // legend: {
    //         data:['成交量'],
    //         y:'bottom'
    //     },
    xAxis: {
        data: timeData,
        show:false
    },
    yAxis: {},
    dataZoom:[{show:true}],
    series: [{
        name:'成交量',
        type: 'line',
        data: zhangTingDealData
    }]
});
var series=[];
var lianBanDataDict={};
for ( x in zhangFuDictData){
    for (y in zhangFuDictData[x]){
        if (!lianBanDataDict[y]){
            lianBanDataDict[y]=[];
            lianBanDataDict[y].push(zhangFuDictData[x][y]);
        }else{
        lianBanDataDict[y].push(zhangFuDictData[x][y]);}
    }
}
var legend_list=[];
for (key in lianBanDataDict){
    var str =key+'连板';
    var item={name:str,
        type:'line',
        data:lianBanDataDict[key]};
    series.push(item);
    legend_list.push(str);
}
erLianBanChart.setOption({
    title: {
            text: '连板股票今日表现'
        },
    tooltip: {trigger: 'axis'},
    // legend:{data:legend_list,y:'bottom'},
    xAxis: {
        data: timeData,
        show:false
    },
    yAxis: {},
    dataZoom:[{show:true}],
    series:series
});
}



</script>

<style type="text/css">
    #dataTable table tr:hover td { background-color: palegoldenrod; }
</style>
</body>
</html>